<template>
  <!-- 姓名输入区 -->
  <div>
    请输入姓名：<input type="text" v-model="username" />
    <div>姓名是：{{ username }}</div>
  </div>

  <div>
<input type="number" v-model.number="num1" />
+
<input type="number" v-model.number="num2" /> ={{ result }}

  
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'


const username = ref("")

const num1 = ref("")
const num2 = ref("")
const result = ref("")
watchEffect(() => {
  if (num1.value !== '' && num2.value !== '') {
    result.value = Number(num1.value) + Number(num2.value)
  } else {
    result.value = ''
  }
})
</script>

<style>

</style>
